<template>
  <div class="songinfo">
    <div class="left">
      <div class="left_a">
        <!-- 唱片 -->
        <div class="info_left">
          <div class="info_left_top">
            <div class="info_left_top_a"><img :src="songinfo.al.picUrl" /></div>
            <div class="info_left_top_b"></div>
          </div>
          <div></div>
        </div>
        <!-- 歌曲信息 -->
        <div class="info_right">
          <h2 class="info_right_a">{{ songinfo.name }}</h2>
          <div class="info_right_b">
            歌手：<span><router-link :to="`/singerInfo/${songinfo.ar[0].id}`">{{ songinfo.ar[0].name }}</router-link></span>
          </div>
          <div class="info_right_c">
            所属专辑：<span><router-link :to="`/albuminfo/${songinfo.al.id}`">{{ songinfo.al.name }}</router-link></span>
          </div>
          <div class="info_right_d">
            <ul>
              <li>
                <router-link to="#"
                  ><span
                    class="iconfont icon-bofang"
                    @click="getmusicId(songinfo.id)"
                    >&nbsp;&nbsp;播放</span
                  ></router-link
                >
              </li>
              <li>
                <router-link to="#"
                  ><span class="iconfont icon-shoucang"
                    >&nbsp;&nbsp;收藏</span
                  ></router-link
                >
              </li>
              <li>
                <router-link to="#"
                  ><span class="iconfont icon-fenxiang"
                    >&nbsp;&nbsp;分享</span
                  ></router-link
                >
              </li>
              <li>
                <router-link to="#"
                  ><span class="iconfont icon-xiazai"
                    >&nbsp;&nbsp;下载</span
                  ></router-link
                >
              </li>
              <li>
                <router-link to="#"
                  ><span class="iconfont icon-pinglun"
                    >&nbsp;&nbsp;评论</span
                  ></router-link
                >
              </li>
            </ul>
          </div>
          <!-- 歌词 -->
          <div class="info_right_e">
            <div v-if="lyric.length>0">
              <div class="info_right_e_a">
                <p v-for="(v, i) in lyric" :key="i" v-html="v"></p>
              </div>
              <div class="info_right_e_b" @click="switchHeight">
                <span>{{ isshow }}</span>
              </div>
            </div>
            <div v-else>暂时没有歌词</div>
          </div>
        </div>
      </div>
      <!-- 评论 -->
      <div class="left_b">
        <Comment :song="song"></Comment>
      </div>
    </div>
    <div class="right">
      <h3>包含这首歌的歌单</h3>
      <ul class="contain">
        <li v-for="(v, i) in Contain" :key="i">
          <div class="contain_left">
            <router-link :to="`/songlist/${v.id}`"
              ><img :src="v.coverImgUrl"
            /></router-link>
          </div>
          <div class="contain_right">
            <div class="a">
              <router-link :to="`/songlist/${v.id}`">
                <span>{{ v.name }}</span>
              </router-link>
            </div>
            <div class="b">
              by<span
                ><router-link to="#">{{
                  v.creator.nickname
                }}</router-link></span
              >
            </div>
          </div>
        </li>
      </ul>
      <h3>相似歌曲</h3>
      <ul class="similar">
        <li v-for="(v, i) in Similar" :key="i">
          <div class="similar_left">
            <router-link :to="`/songinfo/${v.id}`"><span>{{ v.name }}</span></router-link>
            <div class="similar_left_a">
              <span><span v-for="(q, w) in v.artists" :key="w"><span v-if="w > 0">/</span><router-link :to="`/singerinfo/${q.id}`">{{ q.name }}</router-link></span></span>
            </div>
          </div>
          <div class="similar_right"><span>Q</span><span>W</span></div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
import Comment from "../components/Comment.vue";
import axios from "axios";
export default {
  components: { Comment },
  data() {
    return {
      song: true,
      // 歌词数据
      lyric: [],
      // 歌曲信息数据
      songinfo: {
        al: {
          picUrl: "",
        },
        ar: [{ name: "" }],
      },
      //   相似歌曲数据
      Similar: {},
      // 包含这首歌的歌单的数据
      Contain: {},
      // 歌词是否显示
      isshow: "展开",
    };
  },
  methods: {
    ...mapMutations(["getmusicId"]),
    // 获取歌曲信息
    getsonginfos() {
      axios
        .get(`http://127.0.0.1:3000/song/detail?ids=${this.$route.params.id}`)
        .then((res) => {
          this.songinfo = res.data.songs[0];
        });
    },
    // 获取歌词数据
    getlyric() {
      axios
        .get(`http://127.0.0.1:3000/lyric?id=${this.$route.params.id}`)
        .then((res) => {
          let pattern = /.[0-9]+.[0-9]+.[0-9]+./;
          this.lyric = res.data.lrc.lyric.split(pattern);
          for (let i = 0; i < this.lyric.length; i++) {
            if (this.lyric[i] === "\n") {
              this.lyric[i] = "<br>";
            }
          }
        });
    },
    // 获取包含这首歌的歌单的数据
    getContainSong() {
      axios
        .get(`http://127.0.0.1:3000/simi/playlist?id=${this.$route.params.id}`)
        .then((res) => {
          this.Contain = res.data.playlists;
        });
    },
    // 获取相似歌曲数据
    getSimilarSong() {
      axios
        .get(`http://127.0.0.1:3000/simi/song?id=${this.$route.params.id}`)
        .then((res) => {
          this.Similar = res.data.songs;
        });
    },
    // 展开收起歌词
    switchHeight() {
      if (this.isshow === "收起") {
        document.querySelector(".info_right_e_a").style.height = "290px";
        this.isshow = "展开";
      } else {
        document.querySelector(".info_right_e_a").style.height = "100%";
        this.isshow = "收起";
      }
      document.querySelector("body").scrollIntoView({
        block: "center", // 上边框与视窗顶部部平齐
      });
    },
  },
  created() {
    this.getlyric();
    this.getSimilarSong();
    this.getContainSong();
    this.getsonginfos();
  },
};
</script>
<style scoped>
.songinfo {
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  width: 980px;
  margin: 0 auto;
  display: flex;
  background-color: #fff;
}
.left {
  width: 710px;
  border-right: 2px solid #ededed;
  padding: 40px 30px 30px 39px;
}
.left_a {
  display: flex;
}
.left_b {
  margin-top: 40px;
}
.left .info_left .info_left_top {
  position: relative;
  width: 198px;
  height: 198px;
}
.left .info_left .info_left_top .info_left_top_a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
}
.left .info_left .info_left_top .info_left_top_b {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 198px;
  height: 198px;
  border: 35px solid #000;
  border-radius: 50%;
}
.left .info_left .info_left_top img {
  width: 130px;
  height: 130px;
}
.left .info_right {
  margin-left: 30px;
}
.left .info_right .info_right_a {
  font-size: 24px;
  font-weight: 400;
}
.left .info_right .info_right_b {
  font-size: 12px;
  margin: 10px 0;
  color: #999999;
}
.left .info_right .info_right_b span a{
  color: #0c73c2;
}
.left .info_right .info_right_c {
  font-size: 12px;
  margin: 10px 0;
  color: #999999;
}
.left .info_right .info_right_c span a{
  color: #0c73c2;
}
.left .info_right .info_right_d ul {
  display: flex;
}
.left .info_right .info_right_d ul {
  display: flex;
  font-size: 12px;
}
.left .info_right .info_right_d ul li {
  padding: 5px 8px;
  background-color: #f8f8f8;
  margin-right: 10px;
  border: 1px solid #c4c4c4;
  border-radius: 3px;
}
.left .info_right .info_right_d ul li span {
  font-size: 12px;
}
.left .info_right .info_right_d ul li:nth-child(1) {
  background-color: #2e7ecb;
}
.left .info_right .info_right_d ul li:nth-child(1) span {
  color: #ffffff;
}
.left .info_right .info_right_e {
  font-size: 12px;
  margin-top: 40px;
}
.left .info_right .info_right_e .info_right_e_a {
  height: 290px;
  overflow: hidden;
}
.left .info_right .info_right_e p {
  margin: 6px 0;
}
.left .info_right .info_right_e .info_right_e_b {
  margin-top: 20px;
}
.left .info_right .info_right_e .info_right_e_b span {
  color: #0c73c2;
  cursor: pointer;
}
.left .info_right .info_right_e .info_right_e_b span:hover {
  text-decoration: underline;
}
.right {
  width: 270px;
  padding: 20px 40px 40px 30px;
}
.right h3 {
  font-size: 12px;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 7px;
  margin-bottom: 20px;
}
.contain {
  margin-bottom: 25px;
}
.contain li {
  display: flex;
}
.contain .contain_left img {
  width: 50px;
  height: 50px;
}
.contain .contain_right {
  width: 140px;
  margin-left: 10px;
  font-size: 12px;
  color: #999999;
  margin-bottom: 20px;
}
.contain .contain_right .a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.contain .contain_right .a span {
  font-size: 14px;
  color: #000000;
}
.contain .contain_right .a span:hover {
  text-decoration: underline;
}
.contain .contain_right .b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 8px;
  font-size: 12px;
}
.contain .contain_right .b span {
  width: 140px;
  width: 140px;
  color: #666666;
  margin-left: 5px;
  font-size: 12px;
}
.contain .contain_right .b span:hover {
  text-decoration: underline;
}
.similar li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 10px;
}
.similar .similar_left {
  width: 150px;
  display: flex;
  flex-direction: column;
  color: #999999;
  cursor: pointer;
}
.similar .similar_left a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.similar .similar_left .similar_left {
  display: flex;
}
.similar .similar_left span:hover {
  text-decoration: underline;
}
.similar .similar_left > span:nth-child(1) {
  color: #000000;
}
.similar .similar_right span {
  color: #999;
}
.similar .similar_right span:nth-child(1) {
  margin-right: 16px;
}
.similar .similar_left_a {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.similar .similar_left_a a{
  color: #999999;
}
</style>